import theaterJS from "theaterjs";
interface ITheaterOptions {
	autoplay?: boolean;
	minSpeed?: {
		type: number;
		erase: number;
	};
	maxSpeed?: {
		type: number;
		erase: number;
	};
}
export default function useTheater(id: string, options: ITheaterOptions, addSceneOptions: any[]) {
	//1,初始化一个theaterJS对象
	const theater = theaterJS(options);
	//2,将演员添加到选角中。
	theater.addActor(id, { speed: 0.8, accuracy: 0.6 });
	//3,将场景添加到场景中，options.autoplay为true，则播放场景。
	addSceneOptions.forEach(item => {
		theater.addScene(item);
	});
	theater.addScene(theater.replay.bind(theater));
	//4，添加在发出事件时执行的回调( ( 当场景开始/结束时、) )。
	//效果是当打字（type）和删除（erase）开始时，显示光标
	//当打字（type）和删除（erase）结束时，移除光标。
	//当vader打字（type）时，
	theater
		.on("type:start, erase:start", function () {
			theater.getCurrentActor().$element?.classList!.add("actor__content--typing");
		})
		.on("type:end, erase:end", function () {
			theater.getCurrentActor().$element?.classList!.remove("actor__content--typing");
		});
	// 	.on("type:start, erase:start", function () {
	// 		if (theater.getCurrentActor().name === id) {
	// 			document.body.classList.add("dark");
	// 		} else {
	// 			document.body.classList.remove("dark");
	// 		}
	// 	});
	return { theater };
}
